import { onMounted, onUnmounted, ref } from "vue";
import useTouchEvent from "./event/useTouchEvent";



const useTranslate = (touchID: string, pageID: string) => {
  // const className = ref('');
  const status = ref('groups');

  const [touchStartEvent, touchMoveEvent, touchEndEvent] = useTouchEvent(touchID, pageID, status);

  onMounted(()=>{
    const touchDom = document.getElementById(touchID);
    console.log('add Event')
    console.log(touchDom);
    touchDom?.addEventListener('touchstart', touchStartEvent);
    touchDom?.addEventListener('touchmove', touchMoveEvent);
    touchDom?.addEventListener('touchend', touchEndEvent);
  })

  onUnmounted(() => {
    const touchDom = document.getElementById(touchID);
    touchDom?.removeEventListener('touchstart', touchEndEvent);
    touchDom?.removeEventListener('touchmove', touchMoveEvent);
    touchDom?.removeEventListener('touchend', touchEndEvent)
  })

  return {
    state: {
      status,
    }
    
  }
}

export default useTranslate;